<script setup lang="ts">
defineOptions({
  name: "heard",
});

// 听说
const heardNews = ref([
  {
    color: "#083893",
    ringColor: "#7BD8FF",
    title: "听听企业说",
    companyName: "企业",
    content: "平台入驻丝滑，帮我们解决了很多平台入驻丝滑，帮我们解决了很多",
  },
  {
    color: "#009C69",
    ringColor: "#78FFD3",
    title: "听听用户说",
    companyName: "用户",
    content: "平台入驻丝滑，帮我们解决了很多",
  },
  {
    color: "#999999",
    ringColor: "#D2D2D2",
    title: "听听我们说",
    companyName: "公告",
    content: "平台入驻丝滑，帮我们解决了很多",
  },
]);
</script>

<template>
  <div class="grid grid-cols-3 mt-6 rounded-lg overflow-hidden tingshuo-bg">
    <div
      class="py-4 pl-6 pr-10"
      v-for="(item, index) in heardNews"
      :key="index"
      :class="{ 'border-r': index !== heardNews.length - 1 }"
    >
      <div class="flex items-center">
        <div
          :style="{
            '--my-ring-color': item.ringColor,
            'background-color': item.color,
          }"
          class="ring-4 ring-[color:var(--my-ring-color)] w-2 h-2 rounded-full"
        ></div>
        <div class="ml-8">{{ item.title }}</div>
      </div>
      <div class="mt-3 flex items-center text-sm text-gray-400">
        <div class="flex-shrink-0">{{ item.companyName }}</div>
        <div class="ml-4 truncate">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tingshuo-bg {
  background: linear-gradient(to bottom, #ffffff, #f3f7ff);
}
</style>
